import { history } from 'umi';
import cpnstyles from './cpnstyles.less';

const TabHeader = () => (
  <div className={cpnstyles.tabHeader}>
    <svg width="420px" height="38px">
      <defs>
        <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#0067b6" />
          <stop offset="100%" stopColor="#00bce1" />
        </linearGradient>
      </defs>
      <polygon
        points="0,0 110,0 120,13 120,38 11,38 0,26"
        style={{ stroke: '#00cff1', fillOpacity: 0, strokeWidth: 2 }}
      />
      <polygon
        points="7,6 103,6 113,18 113,32 17,32 7,20"
        style={{ stroke: '#0083d6', fill: 'url(#Gradient2)' }}
      />
      <text
        x="32"
        y="24"
        style={{
          fill: '#f0f0f0',
          textShadow: '1px 1px 1px #444444',
          fontSize: '14px',
          fontWeight: 600,
        }}
      >
        信息概览
      </text>
      <polygon
        points="150,0 260,0 270,13 270,38 161,38 150,26"
        style={{ stroke: '#00cff1', fillOpacity: 0, strokeWidth: 2 }}
      />
      <text
        x="182"
        y="24"
        style={{ fill: '#00cff1', textShadow: '1px 1px 1px #333', fontSize: '14px' }}
      >
        停车订单
      </text>
      <polygon
        points="300,0 410,0 420,13 420,38 311,38 300,26"
        style={{ stroke: '#00cff1', fillOpacity: 0, strokeWidth: 2 }}
      />
      <text
        x="332"
        y="24"
        style={{ fill: '#00cff1', textShadow: '1px 1px 1px #333', fontSize: '14px' }}
      >
        个人中心
      </text>
    </svg>
    <div
      className={cpnstyles.buttonBox}
      onClick={(e) => {
        // @ts-ignore
        const src = e.target?.dataset?.src || '/';
        history.push(src);
      }}
    >
      <button type="button" data-src="/" />
      <button type="button" data-src="/parking-orders/list" />
      <button type="button" data-src="/account" />
    </div>
  </div>
);
export default TabHeader;
